<template>
	<view class="container">
		<u-notice-bar text="请填写收货地址用于商品配送" mode="closable"></u-notice-bar>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
			labelPosition="left"
			labelWidth="80px"
			:model="model1"
			ref="form1"
		>
			<u-form-item
				label="收货人"
				prop="name"
				borderBottom
			>
				<u--input
					v-model="model1.name"
					border="none"
					placeholder="姓名"
				></u--input>
			</u-form-item>
			<u-form-item
				label="电话号码"
				prop="telephone"
				borderBottom
			>
				<u--input
					placeholder="手机号"
					v-model="model1.telephone"
					type="number"
				  ></u--input>
			</u-form-item>
			<u-form-item
				label="所在地区"
				prop="location"
				borderBottom
			>
				<u--input
					placeholder="省,市,区,街道"
					v-model="model1.location"
					type="text"
				  ></u--input>
			</u-form-item>
			<u-form-item
				label="详细地址"
				prop="address"
				borderBottom
			>
				<u--textarea
					placeholder="小区楼栋/乡村名称"
					v-model="model1.address"
				></u--textarea>
			</u-form-item>
		</u--form>
		<u-button
			type="primary"
			text="保存"
			customStyle="margin-top: 50px"
			@click="submit"
		></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					name: '',
					telephone: '',
					location: '',
					address: ''
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					telephone: [{
						type: 'string',
						required: true,
						message: '请填写手机号码',
						trigger: ['change']
					}, {
						validator: (rule, value, callback) => {
							return /^1[0-9]{10}$/.test(value);
						},
						message: "请输入正确的手机号码",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					location: {
						type: 'string',
						required: true,
						message: '请填写所在地区',
						trigger: ['change']
					},
					address: {
						type: 'string',
						min: 5,
						required: true,
						message: '请填写详细地址',
						trigger: ['change']
					},
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 15px;
	}
</style>
